<template>
  <!--评论分页-->
  <el-pagination @current-change="handleCurrentChange" :current-page="commentQuery.pageNum"
                 :page-count="commentTotalPage"
                 layout="prev, pager, next" background hide-on-single-page class="pagination">
  </el-pagination>
</template>

<script setup>
import {useState} from "@/util/useState";
import {SET_COMMENT_QUERY_PAGE_NUM, SET_PARENT_COMMENT_ID} from "@/store/mutations-types";
import {useStore} from "vuex";

const {commentQuery, commentTotalPage} = useState(['commentQuery', 'commentTotalPage'])
const store = useStore()

//监听页码改变的事件
function handleCurrentChange(newPage) {
  store.commit(SET_COMMENT_QUERY_PAGE_NUM, newPage)
  store.commit(SET_PARENT_COMMENT_ID, -1)
  store.dispatch('getCommentList')
}
</script>

<style scoped>
.pagination {
  margin-top: 2em;
  text-align: center;
}
</style>
